<template>
<div id="school_act">
<div>
  <ul class="item_box">
    <li v-for="(item,index) in info" :key="index" class="big_box">
      <div class="first_row"><van-tag color="#0099CC" plain class="item">{{item.item}}</van-tag>
      <span class="begin_time">{{item.hold_time|myformatdate}}</span>
         <span class="fenge">|</span>
      <span class="site">{{item.site|ellipsis}}</span>
        <span class="distance">80m</span>
<!--        <img src="/api/media/activity.png">-->
      </div>
<div class="second_row">
  <span class="name">{{item.name}}</span>
<img src="/api/media/tennis.png" v-if="item.item=='网球'">
  <img src="/api/media/activity.jpg" v-else-if="item.item=='羽毛球单打'">
    <img src="/api/media/activity.jpg" v-else-if="item.item=='羽毛球双打'">


<!--  <img src="/api/media/tennis.png" v-if="item.item==='羽毛球单打'">-->


</div>
      <div class="third_floor">
<!--        {{item}}-->
<!--        <img :src="'/api/'+item.holder_img_header">-->
<!--        <van-image round width="50px" height="50px"-->
<!--  :src="'/api/'+item.holder_img_header" />-->
        <van-image round width="2.5rem" height="2.5rem"
                                         :src="'/api/'+item.holder_img_header" fit="cover"
/>
        <span class="holder_name">{{item.holder_name}}</span>
        <span class="my-icon">&#xe604;<span>{{item.sign_num}}/{{item.max_people}}</span></span>
        <van-button type="warning" size="small" :class="{'type':true,'first_change':index===0||index===3}" v-if="Date.parse(item.hold_time)>begin_time" @click="sign_up(item.id)">报名中</van-button>
                <van-button type="default" size="small" :class="{'type':true,'first_change':index===0}" v-else disabled>已截止</van-button>

      </div>
    </li>
  </ul>
</div>
</div>
</template>

<script>
import {getactivity} from "@/network/School/school";

export default {
name: "School_act",
  methods:{
    sign_up(id){
      this.$router.push('/activity/'+id)
    }
  },
  data(){
  return{
    info:[],
    begin_time:new Date()
  }
  },
  created() {
  getactivity().then(
      res=>{
        this.info=res.act_info
        console.log(res);
      }
  )
  },
  filters:{
  myformatdate(inputTime){
	if(!inputTime && typeof inputTime !== 'number'){
		return '';
	}
	var localTime = '';
	inputTime = new Date(inputTime).getTime();
	const offset = (new Date()).getTimezoneOffset();
	localTime = (new Date(inputTime - offset * 60000)).toISOString();
	localTime = localTime.substr(0, localTime.lastIndexOf('.'));
	localTime = localTime.replace('T', ' ');
	return localTime
},
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 3) {
        return value.slice(0,3) + '...'
      }
      return value
    },
  }
}
</script>

<style scoped>
#school_act{
  background-color: #fafafa!important;
}
.item_box li{
  width: 99%;
  height: 300px;
  background-color: #fff;
  padding: 5px 0px;
  margin-top: 10px;

}
.item_box{
  padding: 0px 6px;
}
.begin_time{
  font-size: 14px;
  color: #0099CC;
  margin-left: 10px;
}
.big_box{

}
.item{
  margin-left: 10px;
}
.fenge{
  font-size: 14px;
  color: #cccccc;
  position: absolute;
  margin-left: 5px;
}
.site{
  font-size: 14px;
  color: darkslategray;
  margin-left: 16px;
}
.distance{
  font-size: 14px;
float: right;
  margin-right: 10px;
  margin-top: 3px;
  color: #a8a8a8;
}
.first_row{
  border-bottom: 1px solid #cccccc66;
  height: 25px;
}
.second_row{
  padding: 0 10px;
}
.name{
  color: black;
  /*margin-left: 10px;*/
  float: left;
  margin-top: 10px;
}
.second_row img{
  width: 400px;
  max-width: 330px;
  max-height: 180px;
}
.third_floor img{
  width: 50px;
  height: 50px;;
}
.third_floor{
  padding: 10px;
}
.holder_name{
  position: relative;
  bottom:10px;
  font-size: 14px;
  color: black;
  left: 10px;
}
.my-icon{
  font-size: 16px;
  float: right;
  margin-top: 15px;
  margin-right: 100px;
  color: #a8a8a8;
}
/deep/ .van-button{
  border-radius: 5px;}
 .type{
   display: block;
  text-align: right;
   right: -275px;
  bottom: 35px;
}
 .first_change{
   position: relative;
   left: 270px!important;
   bottom: 35px!important;
 }
</style>